<template>
  <template v-for="(item, index) in menuList" :key="item.path">
    <el-menu-item v-if="!item.children" :index="item.path" @click="fnRouter(item.path)">
      <template #title>
        <img :src="item.icon" alt="" style="width: 20px; height: 20px" />
        <span>{{ item.title }}</span>
      </template>
    </el-menu-item>
    <el-sub-menu v-if="item.children" :index="item.path">
      <template #title>
        <img :src="item.icon" alt="" style="width: 20px; height: 20px" />
        <span>{{ item.title }}</span>
      </template>
      <asideItem :menuList="item.children"></asideItem>
    </el-sub-menu>
  </template>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router"
const router = useRouter()
const props = defineProps({
  menuList: {
    type: Array as () => any[],
    default: () => []
  }
})
function fnRouter(path: string) {
  router.push(path)
}
</script>
<style scoped lang="scss">
.aside-item {
  color: #ccc;
}
</style>
